<template>
  <!-- tab基本信息表单  -->
  <el-scrollbar style="height: 100%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" class="form-input-m" inline-message>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证书编码" prop="certCode">
            <el-input v-model="formData.certCode" placeholder="请输入编码" clearable> </el-input>
          </el-form-item>
        </el-col>
  
        <el-col :span="12">
          <el-form-item label="证书类型" prop="certType">
            <!-- <el-input v-model="formData.certType" type="text" placeholder="请输入证书类型" clearable> </el-input> -->
            <SelectDataList
              ref="employeeSelectRef"
              :url="'/api/sys/basDictDetail/findDictDetailList'"
              :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]"
              :placeholder="'点击选择证书类型'"
              :searchParam="{ code: 'certType' }"
              @selectDataRow="SelectRowClick"
              @clearValue="germTypeClear"
              v-model="formData.certType"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证书名称" prop="certName">
            <el-input v-model="formData.certName" placeholder="请输入证书名称" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="助记符" prop="inputCode">
            <el-input v-model="formData.inputCode" placeholder="请输入助记符" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生效日期" prop="enableDate">
            <vxe-input v-model="formData.enableDate" type="date" placeholder="生效日期" transfer :value-format="'yyyy-MM-dd'" :label-format="'yyyy-MM-dd'" class-name="width-100-percentage" />
            <!-- <el-input v-model="formData.enableDate" placeholder="请输入生效日期" @change="autoInputCode" type="date" translate :value-format="'yyyy-MM-dd'" :label-format="'yyyy-MM-dd'" class-name="width-100-percentage"  clearable> </el-input> -->
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="过期日期" prop="stopDate">
            <!-- <el-input v-model="formData.stopDate"  placeholder="请输入过期日期" type="date" translate :value-format="'yyyy-MM-dd'" :label-format="'yyyy-MM-dd'" class-name="width-100-percentage"  clearable> </el-input> -->
            <vxe-input v-model="formData.stopDate" type="date" placeholder="过期日期" transfer :value-format="'yyyy-MM-dd'" :label-format="'yyyy-MM-dd'" class-name="width-100-percentage" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否停用" prop="stopFlag">
            <el-switch v-model="formData.stopFlag" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="微生物类型" prop="germType">
            <SelectDataList
              ref="employeeSelectRef"
              :url="'/api/sys/basDictDetail/findDictDetailList'"
              :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]"
              :placeholder="'点击选择微生物类型'"
              :searchParam="{ code: 'germType' }"
              @selectDataRow="SelectRowClick"
              @clearValue="germTypeClear"
              v-model="formData.germType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="血清型分组" prop="serumGroup">
            <SelectDataList
              ref="employeeSelectRef"
              :url="'/api/sys/basDictDetail/findDictDetailList'"
              :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]"
              :placeholder="'点击选择血清型分组'"
              :searchParam="{ code: 'serumGroup' }"
              @selectDataRow="serumGroupSelect"
              @clearValue="serumGroupClear"
              v-model="formData.serumGroup"
            />
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" clearable type="textarea" style="width: 560px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <!-- <el-button type="text" class="button-blue" @click="openEditExtraProperties"
              >配置扩展属性</el-button
            > -->
            <el-button type="primary" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 配置扩展属性弹框 -->
    <EditExtraProperties ref="EditExtraPropertiesRef" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import { funBdsJsResult } from '../../../utils/Expression'; //函数公式
import VxePulldownSelection from '../../../components/VxePulldownSelection.vue'; //引用下拉框组件
import EditExtraProperties from '../../../components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import SelectDataList from '../../../components/SelectDataList.vue';
import { find, isEmpty } from 'lodash';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

const formRef = ref(); //表单ref标记
// 表单绑定的数据类型限制
// interface FormDataVO {
//   id: string /*主键*/;
//   certName: string /*证书名称*/;
//   certCode: string /*证书编码*/;
//   certType: string /*证书类型*/;
//   inputCode: string /*输入码*/;
//   stopFlag: boolean /*是否停用*/;
//   enableDate: string /*生效日期*/;
//   stopDate: string /*过期日期*/;
//   remark: string /*备注*/;
// }
// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  certName: '' /*证书名称*/,
  certCode: '' /*证书编码*/,
  certType: '' /*证书类型*/,
  inputCode: '' /*输入码*/,
  stopFlag: true /*是否停用*/,
  enableDate: '' /*生效日期*/,
  stopDate: '' /*过期日期*/,
  remark: '' /*备注*/
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  certCode: [{ required: true, message: '请输入编码' }],
  certName: [{ required: true, message: '请输入名称' }],
  certType: [{ required: true, message: '请输入代号' }]
});

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
    // for (const key in nval) {
    //   if (Object.prototype.hasOwnProperty.call(nval, key)) {
    //     const element = nval[key];
    //     formData[key] = element;
    //   }
    // }
  },
  {
    deep: true,
    immediate: true
  }
);



// 方法定义区 =============
function addNew() {
  console.log('新增');

  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 自动生成助记符
function autoInputCode() {
  formData.inputCode = funBdsJsResult('firstPinYinFun', formData.certName);
}

// 清空表单
function clearFormData() {
  formData.id = '';
  formData.certName =  '' ;
  formData.certCode= '' ;
  formData.certType= '' ;
  formData.inputCode= '' ;
  formData.stopFlag= false ;
  formData.enableDate= '' ;
  formData.stopDate= '' ;
  formData.remark= '';
}

// 保存分管类别
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/inv/cert/addCert';
    } else {
      url = '/inv/cert/updateCert';
    }

    formData.enableDate = isEmpty(formData.enableDate) ? '' : formData.enableDate;
    formData.stopDate = isEmpty(formData.stopDate) ? '' : formData.stopDate;

    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改证书成功', VxeNotifyType.success);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增证书成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改证书失败', VxeNotifyType.error);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增证书失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage('保存分管类别异常', VxeNotifyType.error);
        // if (callback) {
        //   callback(false);
        // }
      });
  });
}

// // 组件
//点击选择的那一项受检单位
function SelectRowClick(row) {
  console.log(row);
  //formData.germType = row.code;
  formData.certType = row.name;
}
// function speciesGroupSelect(row) {
//   formData.speciesGroup = row.name;
// }
// function speciesGroupClear() {
//   formData.speciesGroup = '';
// }

// function serumGroupSelect(row) {
//   formData.serumGroup = row.name;
// }
// function serumGroupClear() {
//   formData.serumGroup = '';
// }

// function genusCodeSelect(row) {
//   formData.genusCode = row.name;
// }
// function genusCodeClear() {
//   formData.genusCode = '';
// }

// function genusGroupSelect(row) {
//   formData.genusGroup = row.name;
// }
// function genusGroupClear() {
//   formData.genusGroup = '';
// }
// function familyCodeSelect(row) {
//   formData.familyCode = row.name;
// }
// function familyCodeClear() {
//   formData.familyCode = '';
// }
// // familyCodeSelect
</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}
</style>
